
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>Immutable Update Patterns · GitBook</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.2">
        
        
        
    
    <link rel="stylesheet" href="../../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="InitializingState.html" />
    
    
    <link rel="prev" href="ReusingReducerLogic.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../../">
            
                <a href="../../">
            
                    
                    Read Me
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="../../introduction/">
            
                <a href="../../introduction/">
            
                    
                    Introduction
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="../../introduction/Motivation.html">
            
                <a href="../../introduction/Motivation.html">
            
                    
                    Motivation
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="../../introduction/CoreConcepts.html">
            
                <a href="../../introduction/CoreConcepts.html">
            
                    
                    Core Concepts
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="../../introduction/ThreePrinciples.html">
            
                <a href="../../introduction/ThreePrinciples.html">
            
                    
                    Three Principles
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="../../introduction/PriorArt.html">
            
                <a href="../../introduction/PriorArt.html">
            
                    
                    Prior Art
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.5" data-path="../../introduction/Ecosystem.html">
            
                <a href="../../introduction/Ecosystem.html">
            
                    
                    Ecosystem
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.6" data-path="../../introduction/Examples.html">
            
                <a href="../../introduction/Examples.html">
            
                    
                    Examples
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="../../basics/">
            
                <a href="../../basics/">
            
                    
                    Basics
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="../../basics/Actions.html">
            
                <a href="../../basics/Actions.html">
            
                    
                    Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="../../basics/Reducers.html">
            
                <a href="../../basics/Reducers.html">
            
                    
                    Reducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="../../basics/Store.html">
            
                <a href="../../basics/Store.html">
            
                    
                    Store
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.4" data-path="../../basics/DataFlow.html">
            
                <a href="../../basics/DataFlow.html">
            
                    
                    Data Flow
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.5" data-path="../../basics/UsageWithReact.html">
            
                <a href="../../basics/UsageWithReact.html">
            
                    
                    Usage with React
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.6" data-path="../../basics/ExampleTodoList.html">
            
                <a href="../../basics/ExampleTodoList.html">
            
                    
                    Example: Todo List
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="../../advanced/">
            
                <a href="../../advanced/">
            
                    
                    Advanced
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="../../advanced/AsyncActions.html">
            
                <a href="../../advanced/AsyncActions.html">
            
                    
                    Async Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="../../advanced/AsyncFlow.html">
            
                <a href="../../advanced/AsyncFlow.html">
            
                    
                    Async Flow
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="../../advanced/Middleware.html">
            
                <a href="../../advanced/Middleware.html">
            
                    
                    Middleware
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.4" data-path="../../advanced/UsageWithReactRouter.html">
            
                <a href="../../advanced/UsageWithReactRouter.html">
            
                    
                    Usage with React Router
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.5" data-path="../../advanced/ExampleRedditAPI.html">
            
                <a href="../../advanced/ExampleRedditAPI.html">
            
                    
                    Example: Reddit API
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.6" >
            
                <span>
            
                    
                    Next Steps
            
                </span>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="../">
            
                <a href="../">
            
                    
                    Recipes
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="../MigratingToRedux.html">
            
                <a href="../MigratingToRedux.html">
            
                    
                    Migrating to Redux
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="../UsingObjectSpreadOperator.html">
            
                <a href="../UsingObjectSpreadOperator.html">
            
                    
                    Using Object Spread Operator
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="../ReducingBoilerplate.html">
            
                <a href="../ReducingBoilerplate.html">
            
                    
                    Reducing Boilerplate
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.4" data-path="../ServerRendering.html">
            
                <a href="../ServerRendering.html">
            
                    
                    Server Rendering
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.5" data-path="../WritingTests.html">
            
                <a href="../WritingTests.html">
            
                    
                    Writing Tests
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.6" data-path="../ComputingDerivedData.html">
            
                <a href="../ComputingDerivedData.html">
            
                    
                    Computing Derived Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.7" data-path="../ImplementingUndoHistory.html">
            
                <a href="../ImplementingUndoHistory.html">
            
                    
                    Implementing Undo History
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.8" data-path="../IsolatingSubapps.html">
            
                <a href="../IsolatingSubapps.html">
            
                    
                    Isolating Subapps
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9" data-path="../StructuringReducers.html">
            
                <a href="../StructuringReducers.html">
            
                    
                    Structuring Reducers
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.9.1" data-path="PrerequisiteConcepts.html">
            
                <a href="PrerequisiteConcepts.html">
            
                    
                    Prerequisite Concepts
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.2" data-path="BasicReducerStructure.html">
            
                <a href="BasicReducerStructure.html">
            
                    
                    Basic Reducer Structure
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.3" data-path="SplittingReducerLogic.html">
            
                <a href="SplittingReducerLogic.html">
            
                    
                    Splitting Reducer Logic
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.4" data-path="RefactoringReducersExample.html">
            
                <a href="RefactoringReducersExample.html">
            
                    
                    Refactoring Reducers Example
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.5" data-path="UsingCombineReducers.html">
            
                <a href="UsingCombineReducers.html">
            
                    
                    Using combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.6" data-path="BeyondCombineReducers.html">
            
                <a href="BeyondCombineReducers.html">
            
                    
                    Beyond combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.7" data-path="NormalizingStateShape.html">
            
                <a href="NormalizingStateShape.html">
            
                    
                    Normalizing State Shape
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.8" data-path="UpdatingNormalizedData.html">
            
                <a href="UpdatingNormalizedData.html">
            
                    
                    Updating Normalized Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.9" data-path="ReusingReducerLogic.html">
            
                <a href="ReusingReducerLogic.html">
            
                    
                    Reusing Reducer Logic
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.5.9.10" data-path="ImmutableUpdatePatterns.html">
            
                <a href="ImmutableUpdatePatterns.html">
            
                    
                    Immutable Update Patterns
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9.11" data-path="InitializingState.html">
            
                <a href="InitializingState.html">
            
                    
                    Initializing State
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5.10" data-path="../UsingImmutableJS.html">
            
                <a href="../UsingImmutableJS.html">
            
                    
                    Using Immutable.JS with Redux
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="../../FAQ.html">
            
                <a href="../../FAQ.html">
            
                    
                    FAQ
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="../../faq/General.html">
            
                <a href="../../faq/General.html">
            
                    
                    General
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.2" data-path="../../faq/Reducers.html">
            
                <a href="../../faq/Reducers.html">
            
                    
                    Reducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.3" data-path="../../faq/OrganizingState.html">
            
                <a href="../../faq/OrganizingState.html">
            
                    
                    Organizing State
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.4" data-path="../../faq/StoreSetup.html">
            
                <a href="../../faq/StoreSetup.html">
            
                    
                    Store Setup
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.5" data-path="../../faq/Actions.html">
            
                <a href="../../faq/Actions.html">
            
                    
                    Actions
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.6" data-path="../../faq/ImmutableData.html">
            
                <a href="../../faq/ImmutableData.html">
            
                    
                    Immutable Data
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.7" data-path="../../faq/CodeStructure.html">
            
                <a href="../../faq/CodeStructure.html">
            
                    
                    Code Structure
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.8" data-path="../../faq/Performance.html">
            
                <a href="../../faq/Performance.html">
            
                    
                    Performance
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.9" data-path="../../faq/ReactRedux.html">
            
                <a href="../../faq/ReactRedux.html">
            
                    
                    React Redux
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.10" data-path="../../faq/Miscellaneous.html">
            
                <a href="../../faq/Miscellaneous.html">
            
                    
                    Miscellaneous
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="../../Troubleshooting.html">
            
                <a href="../../Troubleshooting.html">
            
                    
                    Troubleshooting
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="../../Glossary.html">
            
                <a href="../../Glossary.html">
            
                    
                    Glossary
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9" data-path="../../api/">
            
                <a href="../../api/">
            
                    
                    API Reference
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.9.1" data-path="../../api/createStore.html">
            
                <a href="../../api/createStore.html">
            
                    
                    createStore
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.2" data-path="../../api/Store.html">
            
                <a href="../../api/Store.html">
            
                    
                    Store
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.3" data-path="../../api/combineReducers.html">
            
                <a href="../../api/combineReducers.html">
            
                    
                    combineReducers
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.4" data-path="../../api/applyMiddleware.html">
            
                <a href="../../api/applyMiddleware.html">
            
                    
                    applyMiddleware
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.5" data-path="../../api/bindActionCreators.html">
            
                <a href="../../api/bindActionCreators.html">
            
                    
                    bindActionCreators
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9.6" data-path="../../api/compose.html">
            
                <a href="../../api/compose.html">
            
                    
                    compose
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.10" data-path="../../CHANGELOG.md">
            
                <span>
            
                    
                    Change Log
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.11" data-path="../../PATRONS.md">
            
                <span>
            
                    
                    Patrons
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.12" data-path="../../Feedback.html">
            
                <a href="../../Feedback.html">
            
                    
                    Feedback
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../.." >Immutable Update Patterns</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h1 id="immutable-update-patterns">Immutable Update Patterns</h1>
<p>The articles listed in <a href="PrerequisiteConcepts.html#immutable-data-management">Prerequisite Concepts#Immutable Data Management</a> give a number of good examples for how to perform basic update operations immutably, such as updating a field in an object or adding an item to the end of an array.  However, reducers will often need to use those basic operations in combination to perform more complicated tasks.  Here are some examples for some of the more common tasks you might have to implement.</p>
<h2 id="updating-nested-objects">Updating Nested Objects</h2>
<p>The key to updating nested data is <strong>that <em>every</em> level of nesting must be copied and updated appropriately</strong>.  This is often a difficult concept for those learning Redux, and there are some specific problems that frequently occur when trying to update nested objects.  These lead to accidental direct mutation, and should be avoided.</p>
<h5 id="common-mistake-1-new-variables-that-point-to-the-same-objects">Common Mistake #1: New variables that point to the same objects</h5>
<p>Defining a new variable does <em>not</em> create a new actual object - it only creates another reference to the same object.  An example of this error would be:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">updateNestedState</span>(<span class="hljs-params">state, action</span>) </span>{
    <span class="hljs-keyword">let</span> nestedState = state.nestedState;
    <span class="hljs-comment">// ERROR: this directly modifies the existing object reference - don&apos;t do this!</span>
    nestedState.nestedField = action.data;

    <span class="hljs-keyword">return</span> {
        ...state,
        nestedState
    };
}
</code></pre>
<p>This function does correctly return a shallow copy of the top-level <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> object, but because the <code>nestedState</code> variable was still pointing at the existing object, the <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> was directly mutated.  </p>
<h5 id="common-mistake-2-only-making-a-shallow-copy-of-one-level">Common Mistake #2: Only making a shallow copy of one level</h5>
<p>Another common version of this error looks like this:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">updateNestedState</span>(<span class="hljs-params">state, action</span>) </span>{
    <span class="hljs-comment">// Problem: this only does a shallow copy!</span>
    <span class="hljs-keyword">let</span> newState = {...state};

    <span class="hljs-comment">// ERROR: nestedState is still the same object!</span>
    newState.nestedState.nestedField = action.data;

    <span class="hljs-keyword">return</span> newState;
}
</code></pre>
<p>Doing a shallow copy of the top level is <em>not</em> sufficient - the <code>nestedState</code> object should be copied as well.</p>
<h5 id="correct-approach-copying-all-levels-of-nested-data">Correct Approach: Copying All Levels of Nested Data</h5>
<p>Unfortunately, the process of correctly applying immutable updates to deeply nested <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> can easily become verbose and hard to read.  Here&apos;s what an example of updating <code>state.first.second[someId].fourth</code> might look like:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">updateVeryNestedField</span>(<span class="hljs-params">state, action</span>) </span>{
    <span class="hljs-keyword">return</span> {
        ....state,
        first : {
            ...state.first,
            second : {
                ...state.first.second,
                [action.someId] : {
                    ...state.first.second[action.someId],
                    fourth : action.someValue
                }
            }
        }
    }
}
</code></pre>
<p>Obviously, each layer of nesting makes this harder to read, and gives more chances to make mistakes.  This is one of several reasons why you are encouraged to keep your <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> flattened, and compose reducers as much as possible.</p>
<h2 id="inserting-and-removing-items-in-arrays">Inserting and Removing Items in Arrays</h2>
<p>Normally, a Javascript array&apos;s contents are modified using mutative functions like <code>push</code>, <code>unshift</code>, and <code>splice</code>.  Since we don&apos;t want to mutate <a href="../../Glossary.html#state" class="glossary-term" title="">state</a> directly in reducers, those should normally be avoided.  Because of that, you might see &quot;insert&quot; or &quot;remove&quot; behavior written like this:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">insertItem</span>(<span class="hljs-params">array, action</span>) </span>{
    <span class="hljs-keyword">return</span> [
        ...array.slice(<span class="hljs-number">0</span>, action.index),
        action.item,
        ...array.slice(action.index)
    ]
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">removeItem</span>(<span class="hljs-params">array, action</span>) </span>{
    <span class="hljs-keyword">return</span> [
        ...array.slice(<span class="hljs-number">0</span>, action.index),
        ...array.slice(action.index + <span class="hljs-number">1</span>)
    ];
}
</code></pre>
<p>However, remember that the key is that the <em>original in-memory reference</em> is not modified.  <strong>As long as we make a copy first, we can safely mutate the copy</strong>.  Note that this is true for both arrays and objects, but nested values still must be updated using the same rules.</p>
<p>This means that we could also write the insert and remove functions like this:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">insertItem</span>(<span class="hljs-params">array, action</span>) </span>{
    <span class="hljs-keyword">let</span> newArray = array.slice();
    newArray.splice(action.index, <span class="hljs-number">0</span>, action.item);
    <span class="hljs-keyword">return</span> newArray;
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">removeItem</span>(<span class="hljs-params">array, action</span>) </span>{
    <span class="hljs-keyword">let</span> newArray = array.slice();
    newArray.splice(action.index, <span class="hljs-number">1</span>);
    <span class="hljs-keyword">return</span> newArray;
}
</code></pre>
<p>The remove function could also be implemented as:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">removeItem</span>(<span class="hljs-params">array, action</span>) </span>{
    <span class="hljs-keyword">return</span> array.filter( (item, index) =&gt; index !== action.index);
}
</code></pre>
<h2 id="updating-an-item-in-an-array">Updating an Item in an Array</h2>
<p>Updating one item in an array can be accomplished by using <code>Array.map</code>, returning a new value for the item we want to update, and returning the existing values for all other items:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">updateObjectInArray</span>(<span class="hljs-params">array, action</span>) </span>{
    <span class="hljs-keyword">return</span> array.map( (item, index) =&gt; {
        <span class="hljs-keyword">if</span>(index !== action.index) {
            <span class="hljs-comment">// This isn&apos;t the item we care about - keep it as-is</span>
            <span class="hljs-keyword">return</span> item;
        }

        <span class="hljs-comment">// Otherwise, this is the one we want - return an updated value</span>
        <span class="hljs-keyword">return</span> {
            ...item,
            ...action.item
        };    
    });
}
</code></pre>
<h2 id="immutable-update-utility-libraries">Immutable Update Utility Libraries</h2>
<p>Because writing immutable update code can become tedious, there are a number of utility libraries that try to abstract out the process.  These libraries vary in APIs and usage, but all try to provide a shorter and more succinct way of writing these updates.  Some, like <a href="https://github.com/debitoor/dot-prop-immutable" target="_blank">dot-prop-immutable</a>, take string paths for commands:</p>
<pre><code class="lang-js">state = dotProp.set(state, <span class="hljs-string">`todos.<span class="hljs-subst">${index}</span>.complete`</span>, <span class="hljs-literal">true</span>)
</code></pre>
<p>Others, like <a href="https://github.com/kolodny/immutability-helper" target="_blank">immutability-helper</a> (a fork of the now-deprecated React Immutability Helpers addon), use nested values and helper functions:</p>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> collection = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, {a: [<span class="hljs-number">12</span>, <span class="hljs-number">17</span>, <span class="hljs-number">15</span>]}];
<span class="hljs-keyword">var</span> newCollection = update(collection, {<span class="hljs-number">2</span>: {a: {$splice: [[<span class="hljs-number">1</span>, <span class="hljs-number">1</span>, <span class="hljs-number">13</span>, <span class="hljs-number">14</span>]]}}});
</code></pre>
<p>They can provide a useful alternative to writing manual immutable update logic.</p>
<p>A list of many immutable update utilities can be found in the <a href="https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md#immutable-update-utilities" target="_blank">Immutable Data#Immutable Update Utilities</a> section of the <a href="https://github.com/markerikson/redux-ecosystem-links" target="_blank">Redux Addons Catalog</a>.</p>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="ReusingReducerLogic.html" class="navigation navigation-prev " aria-label="Previous page: Reusing Reducer Logic">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="InitializingState.html" class="navigation navigation-next " aria-label="Next page: Initializing State">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"Immutable Update Patterns","level":"1.5.9.10","depth":3,"next":{"title":"Initializing State","level":"1.5.9.11","depth":3,"path":"recipes/reducers/InitializingState.md","ref":"./recipes/reducers/InitializingState.md","articles":[]},"previous":{"title":"Reusing Reducer Logic","level":"1.5.9.9","depth":3,"path":"recipes/reducers/ReusingReducerLogic.md","ref":"./recipes/reducers/ReusingReducerLogic.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":["livereload"],"pluginsConfig":{"livereload":{},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"recipes/reducers/ImmutableUpdatePatterns.md","mtime":"2017-03-13T14:28:11.351Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-03-15T14:47:19.389Z"},"basePath":"../..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../../gitbook/gitbook.js"></script>
    <script src="../../gitbook/theme.js"></script>
    
        
        <script src="../../gitbook/gitbook-plugin-livereload/plugin.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

